<!DOCTYPE html>
<html lang="en">
<head>
    <#include "/WEB-INF/views/common/meta.html" />
    <title>设备监控</title>
    <#include "/WEB-INF/views/common/css.html"/>
    <link rel="stylesheet" type="text/css" href="/static/themes/css/device_track_map.css"/>
</head>
<body>
<header id="header" class="mui-bar mui-bar-nav bg-blue">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">${deviceCode}</h1>
</header>

<div class="mui-content">
    <div id="mapContainer" class="mapContainer"></div>
    <!--<div class="mapTopLeft">-->
        <!--<div id="tipInfo"></div>-->
    <!--</div>-->
    <!--<div class="button-group">-->
        <!--<button class="button" id="start">开始动画</button>-->
        <!--<button class="button" id="pause">暂停动画</button>-->
        <!--<button class="button" id="resume">继续动画</button>-->
        <!--<button class="button" id="stop">停止动画</button>-->
    <!--</div>-->
</div>
</body>
<#include "/WEB-INF/views/common/js.html"/>
<script type="text/javascript" src="/static/js/index.js"></script>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.2&key=535ce99d41c9b7b233cc5051667e06da'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">

    $("#mapContainer").height($(window).height() - $("#header").height());

    // 创建地图
    var map = new AMap.Map('mapContainer', {
        resizeEnable: true,
        zoom: 15
    })

    // 加载地图控件
    AMapUI.loadUI(['control/BasicControl'], function (BasicControl) {

        //添加一个缩放控件
//        map.addControl(new BasicControl.Zoom({
//            position: {
//                bottom:'20px',
//                left:'10px'
//            }
//        }));

        //图层切换控件
        map.addControl(new BasicControl.LayerSwitcher({
            position:{
                top:'10px',
                right:'10px'
            }
        }));

    });

    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
        if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }

        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: map, //所属的地图实例
            getPath: function(pathData, pathIndex) {
                return pathData.path;
            },
            getHoverTitle: function(pathData, pathIndex, pointIndex) {
                if (pointIndex >= 0) {
                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                }
                return pathData.name + '，点数量' + pathData.path.length;
            },
            renderOptions: {
                renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
            }
        });

        window.pathSimplifierIns = pathSimplifierIns;

        //设置数据
        pathSimplifierIns.setData([{
            name: '路线0',    //118.6053,24.903949
            path: ${track}
        }]);

        //对第一条线路（即索引 0）创建一个巡航器
        var navg = pathSimplifierIns.createPathNavigator(0, {
            loop: false, //循环播放
            speed: ${speed}, //巡航速度，单位千米/小时
            pathNavigatorStyle: {
                width: 16,
                height: 32,
                //content: PathSimplifier.Render.Canvas.getImageContent('${deviceIcon}', onload, onerror),
                strokeStyle: null,
                fillStyle: null
            }
        });
        navg.on('move', function() {
            var content = [];
            var moveStatus = this.getNaviStatus();
            if(this.getNaviStatus() == "moving"){
                moveStatus = "移动中";
            }
            content.push("状态：" + moveStatus);
            //content.push("速度：" + this.getSpeed() + ' km/h');
            //content.push("总行进距离：" + Math.round(this.getMovedDistance() / 1000) + ' km');
            $("#tipInfo").html(content.join("<br/>"));
        });

        navg.start();
        AMap.event.addDomListener(document.getElementById('start'), 'click', function() {
            navg.start();
        }, false);
        AMap.event.addDomListener(document.getElementById('pause'), 'click', function() {
            navg.pause();
        }, false);
        AMap.event.addDomListener(document.getElementById('resume'), 'click', function() {
            navg.resume();
        }, false);
        AMap.event.addDomListener(document.getElementById('stop'), 'click', function() {
            navg.stop();
        }, false);

    });

</script>
</html>